<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<style>
        .centerItem {
            width: 500px;
            height: 400px;
            position:absolute;
            background-color:pink;
            top:450px;
            left:500px;
            z-index:99;
        }
        .mapWelcome{
            margin:100px auto;
            top:870px;
            width:600px;
            height:auto;
            text-align: center;
            font:italic 2em Georgia, serif;
            color:	#FFB6C1;
       }
</style>
<style>
.nav_link{
    width: 200px;
	height: 0px;
    align="center";
}
.welcome{
    margin:100px auto;
    width:300px;
    height:100px;
    text-align: center;
    font:italic 2em Georgia, serif;
    color:	#FFB6C1;
}

.div_head{
    position:fixed;
    width:1600px;
    top:10px;
    text-align: center;
    z-index:1;
}
.div_head_nav{
    display: inline-block;
    margin:auto;
    width: 200px;
	text-align: center;
	color:#AFEEEE;
}
.div_head_nav:hover{
    color: #ffffff;
    cursor:pointer;
}

.div_yiyan{
    color: #ffffff;
    margin:150px auto;
    width:800px;
    height:300px;
    text-align: center;
    font:normal 200 30px "YouYuan";
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<script type="text/javascript" src="https://api.ghser.com/qinghua?type=js"></script>
<script src="{% static 'jquery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'map/echarts.min.js' %}"></script>
<script src="{% static 'map/china.js' %}"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

<body background="https://api.ixiaowai.cn/gqapi/gqapi.php" style="background-attachment:fixed;">
{% if request.session.username or request.COOKIES.username%}
<div class="div_head">
    <div class="div_head_nav" onclick="window.location.href='note/notelist'">
            <h3 class="nav_link">
                进入博客列表
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='acdlist/acdlist'">
            <h3 class="nav_link">
                进入学术主页列表
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='note/mynote'">
            <h3 class="nav_link">
                查看我的博客
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='academy/mysite'">
            <h3 class="nav_link">
                查看我的个人主页
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='user/exit'">
            <h3 class="nav_link">
               退出登录
            </h3>
    </div>
</div>
<div class="welcome">
    <h1>
     Welcome
    </h1>
    <h1>"{{username}}"
    </h1>
</div>
{% else %}
<div class="div_head">
    <div class="div_head_nav" onclick="window.location.href='note/notelist'">
            <h3 class="nav_link">
                进入博客列表
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='acdlist/acdlist'">
            <h3 class="nav_link">
                进入学术主页列表
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='user/login'">
        <h3 class="nav_link">
                登录
        </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='user/reg'">
        <h3 class="nav_link">
        注册
        </h3>
    </div>
</div>
<div class="welcome">
    <h1>
     Welcome
    </h1>
    <h1>"陌生人"
    </h1>
</div>
{%endif%}

<meting-js
	server="netease"
	type="playlist"
	id="6814504413"
	fixed="true"
	autoplay="true"
	loop="all"
	order="random"
	preload="auto"
	list-folded="ture"
	list-max-height="500px"
	lrc-type="1">
</meting-js>
<div id="site-statistic" class="centerItem"></div>
<div class="div_yiyan">
    <h2>
    <script>ishan()</script>
    </h2>
</div>
<div class="mapWelcome">欢迎来自{{province}}{{city}}的第{{visit_num}}位访客</div>
</body>
<script>
   $(document).ready(function(){
   var a_idx = 0;
   $("body").click(function(e){
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 1024,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
   });

});
</script>

    <script>
        jQuery(document).ready(function($) {
            $.ajax({
                    type:'GET',
                    url:'{% url 'statistic:get' %}',
                    datatype:JSON,
                    success:function (data) {
<!--                    alert(data);-->
                    draw(data);

                    },
                    error:function () {
                        console.log('ajax刷新分页数据失败！');
                    }
                });

            //初始化echarts实例
            function draw(data) {
                result = $.parseJSON(data);
                let visitData = []
                for (let i = 0; i < result.data.length; ++i) {
                    visitData.push([result.data[i].x, result.data[i].y, result.data[i].count, result.data[i].city])
                }

                let optionMap = {
                     tooltip: {
                         /*返回需要的信息*/
                         formatter: function (param) {
                             const value = param.value;
                             return '' +
                                 '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px"> ' +
                                 value[3] + '(' + value[2] + ')' +
                                 '</div>';
                         }
                     },
                    geo: {
                        map: 'china',
                        label: {emphasis: {show: false}},
                        roam: true,
                        itemStyle: {
                            normal: {areaColor: '#ffffff', borderColor: 'rgba(66, 203, 232, 0.63)'},
                            emphasis: {areaColor: '#00ff'}
                        }
                    },
                    series: [{
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: visitData,
                        symbolSize: function (data) {
                            let size = [];
                            for (let i = 0; i <= 12; i++) {
                                size.push(i);
                            }
                            let idx = parseInt(data[2] / 10 + 1, 10);
                            if (idx > 12){
                                idx = 12;
                            }
                            return size[idx];
                        },
                        itemStyle: { //基调颜色
                            normal: {
                                color: function (data) {
                                    let idx = parseInt(data.data[2], 10);
                                    idx = 130 - idx;
                                    if (idx < 0) {
                                        idx = 0;
                                    }

                                    let delta = Number(idx).toString(16);
                                    delta += "";
                                    if (delta.length < 2) {
                                        delta += "0";
                                    }
                                    return "#FF" + delta + delta;
                                }
                            }
                        },
                    }]
                };
                var myChart = echarts.init(document.getElementById('site-statistic'));
                myChart.setOption(optionMap);
            }
        });
    </script>
</html>